<template>
	<view class="page">
		<view class="top">
			<u-navbar :is-back="true" :custom-back="goBack" title="添加设备" back-text="">
			</u-navbar>
			<view class="">
				<view class="branchName">
					<text class="name">网点名称</text>
					<text style="color: #02AF74;" class="content">{{virtualDic.storeName}}</text>
				</view>
				<view class="uni-form-item uni-column SN">
					<view class="title">设备SN</view>
					<input class="uni-input" focus placeholder="请输入设备SN" v-model="snValue" style="margin-bottom: 0.5rem;" />
					<u-icon name="scan" color="#02AF74" class="scan" @click="overScan"></u-icon>
					<view class="title">设备位置</view>
					<picker @change="bindPickerChangeRow" class="view-row" :value="value1" :range="arrayRow" style="margin-bottom: 1rem;">
						<view class="uni-input">{{arrayRow[indexRow]}}</view>
						<u-icon name="arrow-down-fill" color="#6a6a6a" class="icon"></u-icon>
					</picker>
					<picker @change="bindPickerChangeCol" class="view-row" :value="value2" :range="arrayCol">
						<view class="uni-input">{{arrayCol[indexCol]}}</view>
						<u-icon name="arrow-down-fill" color="#6a6a6a" class="icon"></u-icon>
					</picker>

					<view class="title">备注信息</view>
					<input class="uni-input" focus placeholder="请输入备注信息" v-model="remark" />
				</view>
			</view>
		</view>
		<view class="bottom">
			<u-button @click="sureBtnClick" type="success">确认</u-button>
		</view>

	</view>
</template>

<script lang="js">
	import {
		bindDevice
	} from "../../../utils/uniApi";
	export default {
		data() {
			return {
				arrayRow: ['1', '2', '3', '4', '5'],
				arrayCol: ['1', '2', '3', '4', '5'],
				snValue: '',
				remark: '',
				indexRow: 0,
				indexCol: 0,
				value1: '2',
				value2: '2',
				type: 'select',
				show1: false,
				show2: false,
				border: true,
				virtualDic: {},
			}
		},
		methods: {
			// compile() {
			// 	uni.navigateTo({
			// 		url: "../../../pages/item/virtualCode/compile",
			// 	});
			// },
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			bindPickerChangeRow(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.indexRow = e.target.value
			},
			bindPickerChangeCol(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.indexCol = e.target.value
			},
			onLoad(option) {
				if (option.store) {
					this.virtualDic = JSON.parse(option.store)
					console.log('输出接受的参数：' + JSON.stringify(this.virtualDic))
				}
			},
			//二维码扫描设备编号
			overScan() {
				var that = this;
				uni.scanCode({
					success: function(res) {
						this.deviceSn = res.result
					},
				});
			},
			sureBtnClick() {
				// console.log(this.virtualDic)
				uni.showLoading({
					title: "加载中",
				});
				let params = {
					sn: this.snValue, //网点ID
					remark: this.remark, //备注
					locationColumn: this.indexRow, //  
					locationLine: this.indexCol, // 
				};
				console.log("++++++++++" + JSON.stringify(params))
				bindDevice(params, this.virtualDic.sn).then((res) => {
					console.log("211111" + JSON.stringify(res))
					uni.hideLoading();
					if (res.data.statusCode == 200) {
						uni.showToast({
							title: '绑定成功',
							icon: 'none',
							duration: 1000
						});
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 1000);
						// console.log(res.data)
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.uni-input,
	.u-input {
		border: none;
		background-color: #fff;
		padding: 10px;
		border-bottom: 10px;
		font-size: 0.7rem;
	}

	.view-row {
		line-height: 1rem;
		min-height: 1rem;
	}

	.branchName {
		display: flex;

		.name {
			flex: 1
		}

		.content {
			flex: 4
		}
	}

	.view-row {
		position: relative;

		.icon {
			position: absolute;
			top: 35%;
			right: 10px;
		}
	}

	.SN {
		position: relative;

		.scan {
			position: absolute;
			top: 20%;
			right: 5px;
		}
	}

	.title {
		margin-bottom: 3px;
	}
	.page {
		background-color: #F3F5F7;
		line-height: 2rem;
	}
	uni-page-body {
		height: 100%;
	}

	.top {
		padding: 10px;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		width: 100%;

		button {
			border-radius: 0;
		}
	}
</style>
